import React, {Component} from 'react';
import InputItem from './components/InputItem';
import './index.scss'

class App extends Component{
  constructor(){
    super()
    this.state = {
      form: {}
    }
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleUpload = this.handleUpload.bind(this)
  }
  render(){
    const data = [
      {cap: '学号', name: 'number', placeholder: '请输入学号'},
      {cap: '姓名', name: 'name', placeholder: '请输入姓名'},
      {cap: '院系', name: 'class', placeholder: '请输入院系'},
      {cap: '专业', name: 'profession ', placeholder: '请输入专业'},
      {cap: '身份证号', name: 'id', placeholder: '请输入身份证号'},
      {cap: '性别：单选', name: 'sex', placeholder: '请选择性别', type: 'radio'},
      {cap: '民族', name: 'nation', placeholder: '请输入国籍'},
      {cap: '手机号', name: 'phone', placeholder: '请手机号输入'},
      {cap: '宿舍楼号', name: 'dorm', placeholder: '请宿舍楼号'},
      {cap: '一寸照片', name: 'photo', placeholder: '请上传照片', type: 'file'},
      {cap: '提交', name: '', placeholder: '', type: 'button'},
    ]
    return (
      <div className="wrapper">
        <div className="title">惊雷学院信息采集</div>
        <div className="container">
          {
            data.map((item, index)=>{
              return (
                <InputItem 
                  cap={item.cap} 
                  name={item.name}
                  placeholder={item.placeholder} 
                  value={this.state.form[item.name]}
                  type={item.type} 
                  key={index} 
                  handleChange={this.handleChange.bind(this, item.name)}
                  handleSubmit={this.handleSubmit} 
                  handleUpload={this.handleUpload}
                />
              )
            })
          }
        </div>
      </div>
    )
  }

  //表单输入
  handleChange(name, e) {
    const formData = { ...this.state.form } //单层深拷贝  创建一个新的对象
    formData[name] = e.target.value
    this.setState({
      form: {...formData}
    })
  }

  handleUpload(e){
    console.log(e.target.value)
  }

  //表单提交
  handleSubmit(){
    console.log(this.state.form)
  }
}

export default App;
